<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">

<body>
  <!-- <line>元素画直线 -->
  <svg xmlns="Http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0" y1="10" x2="0" y2="100" style="stroke:orange;"></line>
    <line x1="10" y1="10" x2="100" y2="100" style="stroke:orange;"></line>
    <line x1="20" y1="10" x2="100" y2="50" style="stroke:orange;"></line>
    <line x1="30" y1="10" x2="110" y2="10" style="stroke:orange;"></line>
  </svg>
  <!-- polyline曲线 -->
  <svg width="120" height="120" viewPort="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polyline fill="none" stroke="orange" points="20,100 40,60 70,80 100,20" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline points="0,0  30,0  15,30" style="stroke:orange;" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline points="10,2  60,2  35,52" style="stroke:orange; stroke-width: 2;fill:#fff;" />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polyline points="10,2  60,2  35,52  10,2" style="stroke:orange; fill: #fff;" />
  </svg>
</body>

</html>